<template>
    <div class="page-container-padding">
      <div>
        <span>记录状态：</span>
        <span>
          <el-select v-model="recordData.state" size="mini">
            <el-option :value="'-1'" label="待处理"></el-option>
            <el-option :value="'1'" label="已完成"></el-option>
            <el-option :value="'0'" label="已拒绝"></el-option>
          </el-select>
        </span>
        <span style="margin-left: 8px">
          <el-button type="primary" size="mini" @click="toQueryData">
            查询
          </el-button>
        </span>
      </div>
      <div style="margin-top: 16px">
        <el-table
          :data="recordData.data"
          border
          stripe
          :row-key="getRowKeys"
          :expand-row-keys="expands"
          @expand-change="expandChangeHandler"
        >
          <el-table-column label="管理" type="expand" width="70">
            <template #default="scope">
              <div style="margin-top: 16px">
                <el-steps
                  :active="active"
                  align-center
                  finish-status="success"
                >
                  <el-step title="申请中" description="提交成功,待审核"></el-step>
                  <el-step title="审核上传" description="申请信息已确认">
                  </el-step>
                  <el-step title="等待审批" description="等待申请审批">
                    <template
                      v-if="scope.row.state == '-1'"
                      #description
                    >
                      <div style="margin-top: 12px">
                        <el-button
                          type="primary"
                          size="mini"
                          @click="toChangeFlow(scope.row, 1)"
                        >
                          通过申请
                        </el-button>
                        <el-button
                          type="danger"
                          size="mini"
                          @click="toChangeFlow(scope.row, 0)"
                        >
                          拒绝
                        </el-button>
                      </div>
                    </template> 
                  </el-step>
                  <el-step
                    title="已完成"
                    description="资料已发送至邮箱"
                  ></el-step>
                </el-steps>
                <div v-if="scope.row.state == '0'" style="height: 40px;">
                  <span style="color: #e41714; margin: 50px; font-size: larger;">
                    已在审批流程被拒绝！
                  </span>
                  
                </div>
                <div
                  v-if="scope.row.state == '-1'"
                  style="margin: 16px 70px"
                >
                  <span>操作说明：</span>
                  <el-input
                    v-model="annexObj.state_plain"
                    placeholder="可在此填写操作的说明，再点击是否通过或拒绝，拒绝时必填。"
                    style="width: 500px"
                    size="mini"
                  ></el-input>
                  <meta http-equiv="Access-Control-Allow-Origin" content="*" />
                  <el-upload
                    ref="upload"
                    action=""
                    :auto-upload="false"
                    :limit="1"   
                    :multiple="false"  
                    :on-exceed="handleExceed"
                    :before-upload="()=>false"
                    :on-change="fileSelectChange">
                    <el-button slot="trigger" size="medium" type="text">点击选择</el-button>
                    <span>(上传任意类型文件)</span>
                  </el-upload>
                  <div>
                    <span style="font-size:larger;">附件是否公开  </span>
                    <el-switch
                      v-model="annexObj.annex_public"
                      active-text="是"
                      inactive-text="否">
                    </el-switch>
                  </div>
                  
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="linkman"
            label="申请人"
            width="90"
            show-overflow-tooltip
          />
          <el-table-column prop="create_time" label="创建时间"  />
          <el-table-column prop="link_msg" label="联系方式" />
          <el-table-column prop="apply_msg" label="申请授权内容" />
          <el-table-column prop="apply_plat" label="申请授权平台" />
          <el-table-column prop="use_to" label="用途" />
          <el-table-column prop="model_file" label="附件" show-overflow-tooltip>
            <template #default="scope">
              <div v-if="scope.row.model_file != ''" class="downloadCSS" style="color: #349cfc;" >
                  <i class="el-icon-download" @click="toDownloadAnnex(scope.row.model_file)"></i>
                  <span @click="previewFile(scope.row.id,1)">&nbsp;{{ scope.row.model_file }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="apply_notes" label="申请备注" />
          <el-table-column prop="annex_time" label='审核时间'/>
          <el-table-column prop="state" label='状态' width="100">
            <template #default="scope">
              <div
                :class="
                  scope.row.state === -1
                    ? 'black'
                    : scope.row.state === 0
                    ? 'red'
                    : 'green'
                "
              >
                <span v-if="scope.row.state == -1">待处理</span>
                <span v-if="scope.row.state == 0">已拒绝</span>
                <span v-if="scope.row.state == 1">已完成</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 页码器 -->
      <div style="margin-top: 8px">
        <el-pagination
          style="margin-top: 5px"
          background
          hide-on-single-page
          :current-page="recordData.page"
          :page-size="recordData.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="recordData.totalCount"
          @current-change="currentPageChanged"
        ></el-pagination>
      </div>
      <!-- 预览文件的窗口 -->
      <el-dialog
        v-if="showPreview"
        :visible.sync="showPreview"
        :title="previewItem.title"
        :close-on-click-modal="false"
        custom-class="preview-dialog"
        width="70%"
        top="3%"
      >
        <div style="height: 75vh; overflow: scroll">
          <div
            v-for="(img, index) in previewItem.images"
            :key="index"
            class="img-item"
            style="text-align:center;"
          >
            <!-- <img :src="img"> -->
            <el-image :src="img" fit="contain" lazy></el-image>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
    import { QueryShouquan, FlowApplyRecord, GetMyRecordPreviewImages} from '@/api/prodService/shouquan'
    import { GetBlob } from '@/utils/dataUtils'
    export default {
      data() {
        return {
          recordData: {
            data: [],
            page: 1,
            pageSize: 30,
            state: '-1',
            totalCount: 0,
            annexLoading: false,
          },
          toWorker: {
            userLoading: false,
            userList: [],
            worker_id: null,
            record_id: -1,
            row_state: 1,
            state_plain: '',
          },
          active: 2,
          expands: [],
          expandRow: {
            record_id: -1,
            annex_url: '',
            annex_file: null,
            annex_filename: '',
            is_public: true,
            fact_desc: '',
          },
          annexUploading: false,

          annexFilename:'',
          annexObj: {
            state_plain: '',
            annex_public: false,
            annex_file: null,
          },

          showPreview: false,
          previewItem: {
            previewLoading: false,
            recordId: -1,
            title: '预览资料',
            annexName: '',
            images: [],
          },    
        }
      },
      mounted() {
        this.getTableData()
      },
      methods: {
        getTableData() {
          QueryShouquan(
            this.recordData.page,
            this.recordData.pageSize,
            this.recordData.state
          ).then((res) => {
            const data = res.data
            this.recordData.data = data.data
            this.recordData.page = data.page
            this.recordData.totalCount = data.total_count
          })
        },
        currentPageChanged(page) {
          this.recordData.page = page
        },
        toQueryData() {
          this.recordData.page = 1
          if (this.recordData.state == '1'){
            this.active = 4
          }
          else if(this.recordData.state == '0' || this.recordData.state == '-1'){
            this.active = 2
          }
          this.getTableData()
        },
        
        fileSelectChange(file) {
        // 截取上传文件的后缀名
        let fileType = file.name.substring(file.name.lastIndexOf(".") + 1)
        // 判断文件名的类型，允许多种就判断多个
        if (['pdf', 'doc', 'docx', 'ppt', 'pptx'].indexOf(fileType) < 0) {
          this.$baseMessage('只能上传pdf,docx,pptx类型的文件!', 'error')
          this.$refs.upload.clearFiles()
          return  
        } 
        this.annexFilename = file.name
        this.annexObj.annex_file = file.raw
      },

        handleExceed(){
          this.$message({ type: 'error', message: '最多支持1个附件上传' })
        },

        toChangeFlow(row, fact) {
          // 参数， row-行数据，fact-是否通过
          let formData = new FormData()
          const bodydata = {
            rid: row.id,
            fact_state: fact,
            fact_desc: this.annexObj.state_plain,
            fact_public:this.annexObj.annex_public
          }
          if (bodydata.fact_state === 0 && bodydata.fact_desc == '') {
            this.$baseMessage('请填写拒绝的理由后，再提交!', 'error')
            return
          }
          formData.append('fact_data', JSON.stringify(bodydata))
          if (this.annexObj.annex_file !== null) {
            formData.append("file", this.annexObj.annex_file); //把文件实体添加到表单对象
          }
          FlowApplyRecord(formData).then((res) => {
            this.$baseMessage(res.msg, res.code === 201 ? 'success' : 'error')
            this.annexObj.state_plain = ''
            this.getTableData()
          })
        },

        getRowKeys(row) {
          return row.id  
        },

        //下载文件  
        toDownloadAnnex(file_download) {
          if (!file_download) {
            this.$baseMessage('附件文件不存在!', 'error')
            return
          }
          this.annexLoading = true    
          GetBlob('http://127.0.0.1:8000/static/Annexes/ProductService/Shouquan/' + file_download).then((blob) => {
            let a = document.createElement('a')
            a.href = window.URL.createObjectURL(blob)
            a.target = '_blank'
            a.download = file_download.substring(7,file_download.length) 
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
            this.annexLoading = false
          })
        },

        // 预览文件
        previewFile(annexNote,note) {
          this.previewItem.recordId = -1
          this.previewItem.images = []
          // 发送请求获取预览图片数据
          this.previewItem.previewLoading = true
          GetMyRecordPreviewImages(annexNote,note).then((res) => {
            const data = res.data
            this.previewItem.recordId = data.id
            this.previewItem.images = data.images
            this.previewItem.title = data.topic
            this.previewItem.previewLoading = false
            setTimeout(() => {
              this.showPreview = true
              }, 500)
          })
        },  

        // 展开的事件
        expandChangeHandler(row, expandedRows) {
          if (expandedRows.length) {
            this.expands = []
            if (row) {
              this.expands.push(row.id)
              this.toWorker.record_id = row.id
              this.expandRow.record_id = row.id
              this.expandRow.annex_file = null
              this.expandRow.annex_filename = row.annex_name || ''
              this.expandRow.annex_url = row.annex_url || null
              this.expandRow.is_public = row.annex_public || true
              if (row.state === -1) {
                this.toWorker.row_state = -1
                this.toWorker.state_plain = row.state_plain
              }
            }
          } else {
            this.expands = []
          }
        },
      },
    }
  </script>
  <style scoped lang="scss">
    .green {
      color: #0dd068;
    }
    .red {
      color: #e74736;
    }
    .hand-action {
      text-align: right;
      margin: 0 8px 16px 0;
      cursor: pointer;
    }
    .downloadCSS {
      cursor: pointer;
    }
  
    .el-table ::v-deep .el-table__expand-icon {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    .el-table ::v-deep .el-table__expand-icon .el-icon-arrow-right:before {
      content: '\e6d9';
      font-weight: 700;
      color: #f74e1e;
    }
  
    .el-table
      ::v-deep
      .el-table__expand-icon--expanded
      .el-icon-arrow-right:before {
      content: '\e6d8';
    }
  </style>
  